import { createApp } from 'vue'
import App from './App.vue'
import router from './routers'
import pinia from './store'

import { registerElIcons } from '@/plugins/ElIcons'
// 引入全局组件布局
import PageWrapLayout from '@/components/PageWrapLayout/index.vue'
// 权限路由
import './permission'
// svg-icons注册导入
import 'virtual:svg-icons-register'
import SvgIcon from '@/components/SvgIcon/index.vue' // svg component
// UI框架 element-plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 引入暗黑模式 element-plus 2.2 内置暗黑模式
import 'element-plus/theme-chalk/dark/css-vars.css'
// 自定义暗黑模式
import '@/styles/element-dark.scss'
// 引入阿里图标库
import '@/assets/iconfont/iconfont.css'
import '@/assets/iconfont/iconfont.js'

import UndrawUi from 'undraw-ui'
import 'undraw-ui/dist/style.css'

import { config } from 'md-editor-v3'
import 'md-editor-v3/lib/style.css'
import MarkExtension from 'markdown-it-mark'

import LinkAttr from 'markdown-it-link-attributes'

// // import { lineNumbers } from '@codemirror/view'

import ZH_TW from '@vavt/cm-extension/dist/locale/zh-TW'
import '@vavt/cm-extension/dist/previewTheme/arknights.css'

config({
  markdownItConfig(md) {
    md.use(MarkExtension)
    md.use(LinkAttr, { attrs: { target: '_blank' } })
  },
  codeMirrorExtensions(theme, extensions) {
    const _exs = [...extensions]

    // _exs[1] = basicSetup;
    return _exs
  },
  editorConfig: { languageUserDefined: { ZH_TW } },
  editorExtensions: {
    highlight: {
      css: {
        atom: {
          light: 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/atom-one-dark.min.css',
          dark: 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/atom-one-dark.min.css',
        },
      },
    },
  },
})

const app = createApp(App)
registerElIcons(app)

app.component('SvgIcon', SvgIcon)
app.component('PageWrapLayout', PageWrapLayout)

app.use(pinia)
app.use(router)
app.use(UndrawUi)
app.use(ElementPlus).mount('#app')
